import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Space } from 'antd';
import axios from 'axios';

const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

const NewsForm = (props) => {
    const [form] = Form.useForm();
    const [categoryList, setCategoryList] = useState([])
    const [submittable, setSubmittable] = useState(false);

    useEffect(() => {
        form.setFieldsValue(props.valueMap[0])

        axios.get("/categories").then(res => {
            setCategoryList(res.data)
        })
    }, [])

    // Watch all values
    const values = Form.useWatch([], form);
    useEffect(() => {
        form
            .validateFields({
                validateOnly: true,
            })
            .then(
                () => {
                    setSubmittable(true);
                    props.setSubmittableEvent(0, true)
                    props.setvalueMapEvent(0, values)
                },
                () => {
                    setSubmittable(false);
                    props.setSubmittableEvent(0, false)
                    props.setvalueMapEvent(0, values)
                },
            );
    }, [values]);

    const onCategoryChange = (value) => {
        // switch (value) {
        //   case 'male':
        //     form.setFieldsValue({
        //       title: 'Hi, man!',
        //     });
        //     break;
        //   case 'female':
        //     form.setFieldsValue({
        //       title: 'Hi, lady!',
        //     });
        //     break;
        //   case 'other':
        //     form.setFieldsValue({
        //       title: 'Hi there!',
        //     });
        //     break;
        //   default:
        // }
    };
    const onFinish = (values) => {
        // console.log(values);
    };
    const onReset = () => {
        form.resetFields();
    };
    const onFill = () => {
        form.setFieldsValue({
            title: '今日热点!',
            categoryId: 1,
        });
    };

    return (
        <Form
            {...layout}
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            style={{
                maxWidth: 600,
            }}
        >
            <Form.Item
                name="title"
                label="新闻标题"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder="输入新闻标题" />
            </Form.Item>
            <Form.Item
                name="categoryId"
                label="新闻分类"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Select
                    placeholder="选择新闻分类"
                    style={{ textAlign: "start" }}
                    onChange={onCategoryChange}
                    allowClear
                >
                    {
                        categoryList.map(item =>
                            <Option value={item.id} key={item.id}>{item.title}</Option>
                        )
                    }
                </Select>
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Space>
                    <Button type="primary" htmlType="submit" disabled={!submittable}>
                        Submit
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        Reset
                    </Button>
                    <Button type="link" htmlType="button" onClick={onFill}>
                        Fill form
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};

export default NewsForm